import { Component } from 'react';
import { getCurrentInstance } from '@tarojs/taro';
import { View, Button, Text } from '@tarojs/components'
import { getCouponDetails, getCouponQRCode } from '@/api/coupon'
import Iconfont from '@/components/Iconfont'
import classnames from 'classnames'
import { concatUrl } from '@/utils'
import Taro from '@tarojs/taro'
// import navigationTo from '@/utils/command'
import dayjs from 'dayjs'
import './index.scss'
import { QRCode } from 'taro-code'


interface State {
  details: GlobalCoupon.Coupon | null
  qrcode: string
}

export default class Index extends Component {
  $instance = getCurrentInstance();

  constructor (props) {
    super(props)
    this.state = {
      details: null,
      qrcode: ''
    }
  }
  state: State
  UNSAFE_componentWillMount() { }
  componentDidMount() {
    const { id } = this.$instance.router.params
    getCouponDetails({
      id
    }).then(res => {
      const data = res.data['data']
      this.setState({
        details: data
      })
      if (data.type == 8) {
        getCouponQRCode({ id }).then(res => {
          const data = res.data['data']
          this.setState({
            qrcode: data.qrcode
          })
        })
      }


    })
  }
  UNSAFE_componentWillReceiveProps(nextProps, nextContext) { }
  componentWillUnmount() { }
  componentDidShow() { }
  componentDidHide() { }
  componentDidCatchError() { }
  componentDidNotFound() { }
  gotoUser = () => {
    const {
      details
    } = this.state
    const { belongStoreCode = '' } = this.$instance.router.params
    let params = {
      id: details.goodsId
    }
    if (belongStoreCode) {
      params.storeCode = belongStoreCode
    }
		if(details.isCyCheckCoupon == 1){ // 常悦检测新能源流程
			let query = {
				storeCode:details.belongStoreCode,
				couponId:details.id
			}
			Taro.navigateTo({ url: `/pages/webview/index/index?path=/check/payment&query=${JSON.stringify(query)}` })
			return
		}
    // goods 为首页基础服务项目商品列表 接口数据 格式不一样
    Taro.navigateTo({ url: concatUrl('/pages/goods/details/index', params) })

  }
  onShareAppMessage(msg) {
    const {
      details
    } = this.state
    return {
      title: `送您${details.baseAmount}元${details.name}`,
      path: `/pages/coupon/share/index?id=${details.id}&name=${details.name}`
    }
  }

  getPx = (number, designWidth = 750) => {
    const sys = Taro.getSystemInfoSync();
    const scale = sys.screenWidth / designWidth; // 缩放比例
    return Number(number * scale).toFixed(0); // 返回缩放后的值
  }

  render() {
    const {
      details,
      qrcode
    } = this.state
    const { tabType } = this.$instance.router.params
    console.log(this.getPx(316))
    return (
      details && (
        <View className='coupon-detils'>
          <View className='coupon-container'>
            <View className='coupon-cont'>
              <View className='price-number'>
                {details.discountType === 1 ? <View className='strong'>￥{details.baseAmount}</View> : <View className='text'><Text>商品券</Text></View>}
              </View>
              <View className='context'>
                <View className='coupon-name'>
                  <View className='strong'>{details.name}</View>
                  <View className={classnames('coupon-type', {
                    'hezuo': details.type === 3
                  })}
                  >
                    {details.type === 1 && <Iconfont size='24' name='icon-zu21' />}
                    {details.type === 2 && <Iconfont size='24' name='icon-zu26' />}
                    {details.type === 3 && <Iconfont size='24' name='icon-zu18' />}
                    {details.typeLabel}
                  </View>
                </View>
                {details.carLicenseLimit && <View className='msgtext'>限{details.carLicenseLimit}使用</View>}
                <View className='msgtext'>{details.shortDesc}</View>
                <View className='msgtext'>
                  {dayjs.unix(details.startAt).format('YYYY年MM月DD日') + '-' + dayjs.unix(details.endAt).format('YYYY年MM月DD日')}
                </View>
              </View>
            </View>
            <View className='coupon-block'>
              <View className='line'></View>
            </View>
            <View className='coupon-cont2'>
              {details.type == 8 && qrcode && <QRCode className='qrcode' text={qrcode} size={Number(this.getPx(316))} ></QRCode>}
              <View className='code-name'>卡券码</View>
              <View className='code-number'>{details.id}</View>
              {details.type == 8 && <View className='qrcode-remark'>*办理前请展示该二维码给工作人员核销使用</View>}
              <View className='btn-group'>
                {
                  details.status === 0 && details.isSendToOtherAvailable === 1 &&
                  <View className='btn'>
                    <Button className='share-btn' openType='share'></Button>
                    转赠好友
                  </View>
                }
                {
                  tabType != 2 && details.status === 0 && details.isUsed == 1 && details.type != 8 && <View onClick={() => this.gotoUser()} className='btn'>去使用</View>
                }
              </View>
            </View>
          </View>
          <View className='coupon-text'>
            <View className='coupon-title'>适用接入商</View>
            <View className='coupon-p'>
              <View className='hide-height'></View>
              <View className='span'>
                {details.vendorNameList.join('、')}
                <View className='open'>展开</View>
              </View>
            </View>
          </View>
          <View className='coupon-text'>
            <View className='coupon-title'>使用规则</View>
            <View className='coupon-p'>
              <View className='span'>{details.useDesc}</View>
            </View>
          </View>
        </View>
      )
    );
  }
}
